<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { ElMessage, ElMessageBox, dayjs } from 'element-plus'
import type { Action } from 'element-plus'
import { getClockListAllApi, getClockListApi } from '@/api/index.js'
import Login from './Login.vue'
import Camera from './Camera.vue'

const loginVisible = ref(false)

const tableData = ref([])

// 清除登录信息
const clearInfo = () => {
  ElMessageBox.alert('谨慎操作! 一般用于更换班级!', '确定清除登录信息？', {
    confirmButtonText: 'OK',
    closeOnClickModal:true,
    closeOnPressEscape:true,
    callback: (action: Action) => {
      console.log(action);
      if(action==='confirm'){
        localStorage.clear()
        location.reload()// 刷新页面
        ElMessage({
          type: 'success',
          message: `清除登录信息`,
        })
      }else{
        ElMessage({
          type: 'info',
          message: `取消操作`,
        })
      }
    },
  })
}

// 获取打卡信息
const getClockInfo = () => {
  const userInfo = localStorage.getItem('userInfo')
  
  if(userInfo){
    const { user_name, user_id, department, department_id } = JSON.parse(userInfo as string)
    const params = { user_name, user_id, department_id, currentPage:currentPage.value, pageSize:pageSize.value }

    // 获取打卡信息 总数
    getClockListAllApi(params).then((res:any)=>{
      total.value = res.data && res.data.total || 0// 分页数
    })

    // 获取打卡信息
    getClockListApi(params).then((res:any)=>{
      res.data && res.data.map((item:any)=>{
        if(item.department_id==department_id){
          item.user_name=user_name
          item.department=department
          item.date=dayjs(parseInt(item.clock_time)).format('YYYY-MM-DD HH:mm:ss')
          item.week=dayjs().day()
        }
      })

      tableData.value = res.data
    })
  }
}

onMounted(()=>{
  getClockInfo()
})

// 分页信息
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  currentPage.value = 1
  getClockInfo()
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  getClockInfo()
}
</script>

<template>
  <div class="container flex flex-col justify-center items-center relative">
    <Login v-model="loginVisible" :getClockInfo="getClockInfo"></Login>

    <el-button type="info" plain class="absolute right-2 top-2" @click="clearInfo">清除登录</el-button>

    <div class="clockIn">
      <div class="flex flex-col">
        <Camera v-model="loginVisible" :getClockInfo="getClockInfo"></Camera>
      </div>
    </div>
    
    <el-divider content-position="center" border-style="dashed">千里之行始于足下，快来完成今天的打卡，快乐学习吧！^_*</el-divider>

    <el-table :data="tableData" size="small" style="width: 100%">
      <el-table-column type="index" />
      <el-table-column prop="user_name" label="姓名" width="180" />
      <el-table-column prop="department" label="班级" width="180" />
      <el-table-column prop="date" label="时间" width="180" />
      <el-table-column prop="week" label="星期" width="180" />
      <el-table-column label="图片" >
        <template #default="scope">
            <img v-if="scope.row.clock_url" :src="scope.row.clock_url" alt="我裂开了">
            <span v-else>暂无图片~</span>
        </template>
      </el-table-column>
      <el-table-column prop="remarks" label="备注" />
    </el-table>

    <el-pagination
      class="self-end mt-20px"
      v-model:current-page="currentPage"
      v-model:page-size="pageSize"
      :page-sizes="[10, 20, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<style scoped>
.container{
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 1.5rem;
  margin: 0.5px;
  background-color: #ffffff;
}
.clockIn{
  @apply w-200px h-200px m-10px border-1px border-gray-300 rounded-20px flex items-center justify-center cursor-pointer;
}
</style>